<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="close" :close-on-click-modal="false" width="90%">
        <el-radio-group v-model="type">
            题目类型
            <el-radio :label="0">选择</el-radio>
            <el-radio :label="1">判断</el-radio>        
        </el-radio-group>
        <el-form :rules="QuestionRules" ref="QuestionRef" :model="questionForm" hide-required-asterisk label-position="left" class="form">
            <div class="table">
              <el-form-item label="题目" prop="text">
                   <el-input type="textarea" v-model="questionForm.text"></el-input>
               </el-form-item>
               <el-form-item v-if="questionForm.type === 0">
                   选项A<el-input type="textarea" v-model="selectA"></el-input>
                   选项B<el-input type="textarea" v-model="selectB"></el-input>
                   选项C<el-input type="textarea" v-model="selectC"></el-input>
                   选项D<el-input type="textarea" v-model="selectD"></el-input>
               </el-form-item>
               <el-form-item prop="answer">
                   正确选项：
                   <el-radio-group v-model="questionForm.answer" v-if="questionForm.type === 0">
                      <el-radio :label="0">A</el-radio>
                      <el-radio :label="1">B</el-radio>
                      <el-radio :label="2">C</el-radio>
                      <el-radio :label="3">D</el-radio>
                   </el-radio-group>
                   <el-radio-group v-model="questionForm.answer" v-else>
                      <el-radio :label="0">正确</el-radio>
                      <el-radio :label="1">错误</el-radio>
                   </el-radio-group>
               </el-form-item>
            </div>
           <div class="msg">
               <div>{{questionForm.text}}</div>
               <div v-if="selectA">A.{{selectA}}</div>
               <div v-if="selectB">B.{{selectB}}</div>
               <div v-if="selectC">C.{{selectC}}</div>
               <div v-if="selectD">D.{{selectD}}</div>
               <div v-if="questionForm.answer!==null" class="font">正确选项：
                   <span v-if="questionForm.type === 0">{{questionForm.answer | SelectType}}</span>
                   <span v-else>{{questionForm.answer | JudgeType}}</span>
                </div>
           </div>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()" :loading="buttonLoading">取 消</el-button>
        <el-button v-if="!curData._id" type="primary" @click="add()" :loading="buttonLoading">确 定</el-button>
        <el-button v-else type="primary" @click="edit(curData._id)" :loading="buttonLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {add,update} from '@/api/question'
export default {
 props:{
    curData : Object
 },
 data() {
    return {
      dialogVisible: false,
      buttonLoading: false,
      title: '新增题目',
      theData: {},
      type:0,
      questionForm:{
        text:'',
        select:[],
        type: 0,
        answer : null
      },
      selectA:'',
      selectB:'',
      selectC:'',
      selectD:'',
      QuestionRules: {
        text: [{ required: true, message: "请输入题目", trigger: "blur" }],
        answer: [{ required: true, message: "请选择正确项", trigger: "blur" }],
      }
    };
  },
  watch:{
    //监听curId判断是编辑还是新增
    dialogVisible(val){
      if(val){
        if (this.curData._id) {
          this.title = '编辑题目'
          const {text,type,select,answer} = this.curData
          this.questionForm = {
              text : text,
              answer : answer,
              type : type,
              select : []
          }
          this.selectA = select[0]
          this.selectB = select[1]
          this.selectC = select[2]
          this.selectD = select[3]
          console.log(this.questionForm,77777777)
          console.log(this.curData,333333)
        }
      }
    },
    type(val){
        this.selectA = ''
        this.selectB = ''
        this.selectC = ''
        this.selectD = ''
        this.questionForm.type = val
        this.questionForm.select = []
    }
  },
  methods:{
    //打开
    open() {
      this.dialogVisible = true;
    },
    //关闭
    close() {
      this.dialogVisible = false;
      this.$refs.QuestionRef.resetFields();
      this.questionForm = {
          text:'',
          select:[],
          type: this.type,
          answer : null
      },
      this.selectA = ''
      this.selectB = ''
      this.selectC = ''
      this.selectD = ''
    },
    //编辑
    edit(id){
        console.log(id)
        if(this.questionForm.type === 0){
           this.questionForm.select.push(this.selectA,this.selectB,this.selectC,this.selectD)
        }
        this.$refs.QuestionRef.validate( async valid => {
            if (!valid) return 
            this.buttonLoading = true;
            console.log(this.questionForm,'sss')
            update(id,this.questionForm)
            .then((res)=>{
                console.log(res)
                if(res.status === 200){
                    this.close();
                    this.$message.success("编辑成功!");
                    this.$emit("getListData");
                }
                this.buttonLoading = false;
            })
            .catch((err)=>{
                this.buttonLoading = false;
                this.$message.error("编辑失败!")
            })
        })
    },
    //新增
    add() {
       if(this.questionForm.type === 0){
           this.questionForm.select.push(this.selectA,this.selectB,this.selectC,this.selectD)
       }
      this.$refs.QuestionRef.validate( async valid => {
        if (!valid) return 
        this.buttonLoading = true;
        this.questionForm.date = Date.parse(new Date())
        console.log(this.questionForm,'sss')
        // return
        add(this.questionForm)
        .then((res) => {
          console.log(res)
          if(res.status === 200){
            this.close();
            this.$message.success("新增成功!");
            this.$emit("getListData");
          }     
          this.buttonLoading = false;
        })
        .catch((err) => { 
          this.buttonLoading = false;
          this.$message.error("新增失败!")
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form{
    display: flex;
}
.table{
    width: 60%;
}
.msg{
    width: 50%;
    margin-left: 10%;
    margin-top: 20px;
}
.font{
    font-size: 20px;
    color: black;
}
.msg div {
    margin-top: 10px;
}
</style>